<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input
          v-model="filter.id"
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.name"
          placeholder="名称"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-input
          v-model="filter.company"
          placeholder="单位名称"
          style="width: 160px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
        v-loading="loading"
      >
        <el-table-column prop="id" label="编号" width="100" align="center"/>
        <el-table-column prop="name" label="名称" width="150"/>
        <el-table-column prop="requirement" label="申请要求" width="150"/>
        <el-table-column prop="start_time" label="开始时间" width="150"/>
        <el-table-column prop="end_time" label="结束时间" width="150"/>
        <el-table-column prop="deadline" label="申请截至时间" width="180"/>
        <el-table-column prop="company" label="实习单位名称" width="180"/>
        <el-table-column prop="company_info" label="实习单位简介" width="180" show-overflow-tooltip/>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 底部信息 -->
      <div class="footer-section">
        <div class="pagination-info">
          第1到{{ filteredData.length }}条，共{{ filteredData.length }}条记录。
        </div>
        <div class="loading-text" v-if="loading">
          数据加载中，请稍后...
        </div>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog 
      :title="isEdit ? '修改实习信息' : '新增实习信息'"
      :visible.sync="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="form" 
        label-width="120px"
        label-position="right"
      >
        <el-form-item label="编号" prop="id" v-if="isEdit">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="实习名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入实习名称"></el-input>
        </el-form-item>
        <el-form-item label="申请要求" prop="requirement">
          <el-input 
            type="textarea"
            :rows="3"
            v-model="form.requirement" 
            placeholder="请输入申请要求"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="start_time">
          <el-date-picker
            v-model="form.start_time"
            type="date"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="end_time">
          <el-date-picker
            v-model="form.end_time"
            type="date"
            placeholder="选择结束时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="申请截止时间" prop="deadline">
          <el-date-picker
            v-model="form.deadline"
            type="date"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="实习单位名称" prop="company">
          <el-input v-model="form.company" placeholder="请输入实习单位名称"></el-input>
        </el-form-item>
        <el-form-item label="单位简介" prop="company_info">
          <el-input 
            type="textarea"
            :rows="3"
            v-model="form.company_info" 
            placeholder="请输入单位简介"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      filter: {
        id: '',
        name: '',
        company: ''
      },
      tableData: [
        {
          id: '4',
          name: '生产实习',
          requirement: '无挂科',
          start_time: '2022-01-02',
          end_time: '2023-02-28',
          deadline: '2023-01-01',
          company: '华为',
          company_info: '华为技术有限公司是一家生产销售通信设备的民营通信科技公司，总部位于中国广东省深圳市。'
        },
        {
          id: '5',
          name: '软件开发实习',
          requirement: '熟悉Java/Python，有项目经验者优先',
          start_time: '2023-06-01',
          end_time: '2023-08-31',
          deadline: '2023-05-15',
          company: '阿里巴巴',
          company_info: '阿里巴巴集团控股有限公司是中国的跨国科技公司，提供电子商务、零售互联网、科技和金融服务。'
        },
        {
          id: '6',
          name: '市场营销实习',
          requirement: '市场营销相关专业，良好的沟通能力',
          start_time: '2023-07-01',
          end_time: '2023-09-30',
          deadline: '2023-06-15',
          company: '腾讯',
          company_info: '腾讯控股有限公司是一家中国跨国企业集团和控股公司，其子公司专门从事各种与互联网相关的服务和产品。'
        }
      ],
      editDialogVisible: false,
      isEdit: false,
      form: {
        id: '',
        name: '',
        requirement: '',
        start_time: '',
        end_time: '',
        deadline: '',
        company: '',
        company_info: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入实习名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        requirement: [
          { required: true, message: '请输入申请要求', trigger: 'blur' }
        ],
        start_time: [
          { required: true, message: '请选择开始时间', trigger: 'change' }
        ],
        end_time: [
          { required: true, message: '请选择结束时间', trigger: 'change' },
          { validator: this.validateEndTime, trigger: 'change' }
        ],
        deadline: [
          { required: true, message: '请选择申请截止时间', trigger: 'change' },
          { validator: this.validateDeadline, trigger: 'change' }
        ],
        company: [
          { required: true, message: '请输入实习单位名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.id === '' || item.id.includes(this.filter.id)) &&
          (this.filter.name === '' || item.name.includes(this.filter.name)) &&
          (this.filter.company === '' || item.company.includes(this.filter.company))
        )
      })
    }
  },
  mounted() {
    // 模拟数据加载
    setTimeout(() => {
      this.loading = false
    }, 1500)
  },
  methods: {
    // 搜索
    handleSearch() {
      // 计算属性 filteredData 会自动更新
      this.$message.success('搜索完成')
    },
    
    // 重置搜索
    resetSearch() {
      this.filter = {
        id: '',
        name: '',
        company: ''
      }
    },
    
    // 编辑实习信息
    handleEdit(row) {
      this.isEdit = true
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true
    },
    
    // 验证结束时间
    validateEndTime(rule, value, callback) {
      if (!value) {
        callback(new Error('请选择结束时间'))
      } else if (this.form.start_time && new Date(value) < new Date(this.form.start_time)) {
        callback(new Error('结束时间不能早于开始时间'))
      } else {
        callback()
      }
    },
    
    // 验证截止时间
    validateDeadline(rule, value, callback) {
      if (!value) {
        callback(new Error('请选择申请截止时间'))
      } else if (this.form.start_time && new Date(value) > new Date(this.form.start_time)) {
        callback(new Error('申请截止时间不能晚于实习开始时间'))
      } else {
        callback()
      }
    },
    
    // 对话框关闭
    handleDialogClosed() {
      this.$refs.form.resetFields()
      this.form = {
        id: '',
        name: '',
        requirement: '',
        start_time: '',
        end_time: '',
        deadline: '',
        company: '',
        company_info: ''
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            // 编辑模式 - 更新数据
            const index = this.tableData.findIndex(item => item.id === this.form.id)
            if (index !== -1) {
              this.tableData.splice(index, 1, { ...this.form })
              this.$message.success('修改成功')
            }
          } else {
            // 新增模式 - 添加数据
            const newId = this.tableData.length > 0 
              ? Math.max(...this.tableData.map(item => parseInt(item.id))) + 1 
              : 1
            this.tableData.unshift({
              ...this.form,
              id: newId.toString()
            })
            this.$message.success('新增成功')
          }
          this.editDialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.internship-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.footer-section {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}

.pagination-info {
  color: #909399;
  font-size: 13px;
}

.loading-text {
  color: #606266;
  font-size: 13px;
  font-style: italic;
}

.el-button--text {
  color: #409EFF;
  padding: 0;
}

/* 对话框表单样式调整 */
.el-form-item {
  margin-bottom: 18px;
}

.el-date-editor, .el-input, .el-textarea {
  width: 100%;
}

/* 表格单元格内容过长时显示省略号 */
.el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>